<template>
  <div ref="warp">
    <div ref="echartEl" :style="{width: data.width + 'px',height: data.height + 'px'}"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
import echarts from '@/utils/echatsConfig.ts'
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer, CanvasRenderer]);
// import type { ECOption } from '@/utils/echatsConfig.ts'
// let props = defineProps<{
//   config: {
//     options: ECOption
//   }
// }>()
let warp = ref()
let echartEl = ref()
let data = reactive({
  zoom: 310 / 320,
  barCharts: {} as any,
  width: 310,
  height: 320
})
onMounted(() => {
  data.width = warp.value.clientWidth
  data.height = data.width / data.zoom
});


function init(pieData: any[]){
  if(!data.barCharts.setOption){
    data.barCharts = echarts.init(echartEl.value, undefined, { 
      renderer: 'svg' 
    });
  }
  data.barCharts.setOption(getOption(pieData));
  // 必要，否则图标会以原始尺寸渲染
  data.barCharts.resize({ 
    width: data.width,
    height: data.height
  });
}

function getOption(pieData: any[]) {
  return {
    tooltip: {
      trigger: 'item',
      formatter: (a: { marker: any; name: any; value: string; }) => {
        return a.marker + a.name +'  '+ a.value + '万m²';
      }
    },
    legend: {
      right: 'center',
      width: '100%',
      itemWidth: 10 * data.zoom,
      itemHeight: 10 * data.zoom,
      bottom: 0,
      textStyle:{
        color: '#FFFFFFB0',
        fontSize: data.zoom * 12 + 'px'
      },
      icon: 'circle'
    },
    series: [
      {
        type: 'pie',
        radius: [30 * data.zoom + '%', 40 * data.zoom + '%'],
        center: ['55%','46%'],
        // left: 15,
        data:pieData,
        height: '86%',
        label:{
          alignTo: 'edge',
          fontSize: data.zoom * 12 + 'px',
          formatter: (a: { value: string; percent: string; name: string; },_b: any,_c: any) => {
            return '{data|'+a.value+'万m²/'+parseFloat(a.percent).toFixed(1)+'%} \n{item|'+a.name+'}';
          },
          width: 100 * data.zoom,
          fontWeight: 'bolder',
          edgeDistance: 5,
          lineHeight: 15,
          rich: {
            item: {
              fontSize: data.zoom * 14 ,
              color: '#FFFFFF80',
            },
            data: {
              fontSize: data.zoom * 12 ,
              fontWeight: 'bolder'
            }
          }
        },
        labelLine:{
          maxSurfaceAngle: 160,
          length: 50 * data.zoom,
          length2: 10 * data.zoom,
          lineStyle:{
            type: 'dashed'
          }
        },
        labelLayout: function (params: { labelRect: { x: number; y: number; width: any; }; labelLinePoints: any; }) {
          const isLeft = params.labelRect.x < data.width / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x 
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points
          };
        }
      }
    ]
  };
}
onBeforeUnmount(() => {
  data.barCharts.dispose && data.barCharts.dispose()
})
defineExpose({
  init
})
</script>